<template>
  <div class="noselect">
    <div class="play-wrapper" @mousedown="inVideo()" @mouseup="isInVideo()" @mousemove.self="mousemove()">
      <div class="top-bar" @mouseup="isinVideo=false" @mouseenter="cancelTimer()" @mouseleave="mousemove()">
        <span class="top-title">{{videoName}}</span>
        <div class="top-bar-right" @click="close()">
          <i class="iconfont icon-Close"></i>
        </div>
      </div>
      <div class="video-player">
        <video id="video" class="video" 
          :src="getUrl(this.url)" @mousemove.self="mousemove()"
          @timeupdate="timeupdate" @canplay="startPlay">
        </video>
      </div>
      <div class="play-bar" @mouseup="isinVideo=false" @mouseenter="cancelTimer()" @mouseleave="mousemove()">
        <div ref="progress" class="progress" @mousedown="progressMousedown">
          <div ref="cur-progress" class="cur-progress" :style="{width: curLength+'%'}"></div>
          <!--拖动的点点-->
          <div ref="idot" class="idot" :style="{left: curLength+'%'}"></div>
          <!--拖动的点点 end -->
        </div>
        <div id="playbtn" @mousedown="inVideo()" @mouseup="isInVideo()">
          <i id="playorpause" class="iconfont icon-playbtn"></i>
        </div>
        <div class="video-time">
          <span>{{curTime}}</span>/
          <span>{{duration}}</span>
        </div>
        <div class="play-bar-right">
          <div id="beisu">
            <i class="beisu">倍速</i>
            <div class="speed">
              <p class="speedx2" @click="speed(2)">x2.0</p>
              <p class="speedx1.5" @click="speed(1.5)">x1.5</p>
              <p class="speedx1" @click="speed(1)">x1.0</p>
              <p class="speedx0.5" @click="speed(0.5)">x0.5</p>
            </div>
          </div>
          <div id="volume">
            <i id="icon-volume" class="iconfont" 
            :class="{'icon-volume-x':volume==0,
            'icon-volume-':volume>0&&volume<=40,
            'icon-volume-1':volume>40&&volume<=100}" 
            @click.self="mute()"></i>
            <div class="volume-silder-wrapper">
              <el-slider
                class="volume-silder"
                :show-tooltip="false"
                @change="beforemute()"
                vertical
                v-model="volume">
              </el-slider>
            </div>
          </div>
          <div id="quanping" @click="quanping()">
            <i class="iconfont icon-quanping"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import {mixin} from '../mixins/index'
export default {
  name:'video-play',
  data(){
    return {
      isinVideo:false,   //开始暂停视频按下位置是否都在视频内
      timer:{},          //鼠标移入计时器
      volume:50,         //音量
      volume2:50,        //静音前的音量
      duration:'00:00',  //总时长
      curTime:'00:00',   //当前时长
      curLength: 0,      //进度条的位置
      isMove:false,      //是否正在拖动进度条
    }
  },
  mixins:[mixin],
  computed:{
    ...mapGetters([
      'url',
      'isPlay',
      'videoName'
    ]),
  },
  watch:{
    //监控isPlay改变播放暂停按钮和视频暂停
    isPlay(){
      var video = document.getElementById('video')
      var playbtn = document.getElementById('playorpause')
      if (!this.isPlay) {
        playbtn.classList.replace('icon-pause','icon-playbtn')
        video.pause()
      }else{
        playbtn.classList.replace('icon-playbtn','icon-pause')
        video.play()
      }
    },
    volume(){
      var video = document.getElementById('video')
      video.volume = this.volume/100
    },
    url(){
      this.curLength = 0
    }
  },
  created(){
    //判断是否全屏
    document.addEventListener("fullscreenchange", function (e) {
      if (document.fullscreenElement) {
        document.getElementsByClassName('video-player')[0].classList.add('video-player-full')
      } else {
        document.getElementsByClassName('video-player')[0].classList.remove('video-player-full')
      }
    })
    //拖拽结束
    document.addEventListener('mouseup',() =>{
      if (this.isMove) {
        document.getElementById('video').currentTime = this.curLength*document.getElementById('video').duration/100
        this.isMove = false
      }
    }),
    //拖拽
    document.addEventListener('mousemove',(e)=>{
      if (!this.duration) {
        return false
      }
      if(this.isMove){
        this.curLength = ((e.clientX - this.$refs.progress.getBoundingClientRect().left)/document.getElementById('video').getBoundingClientRect().width)*100
        if(this.curLength >=100){
          this.curLength = 100
        }
        if(this.curLength <=0){
          this.curLength = 0
        }
        this.curTime = this.formatTime(this.curLength * document.getElementById('video').duration/100)
      }
    })
  },
  methods:{
    startPlay(){
      this.duration = this.formatTime(document.getElementById('video').duration)
    },
    timeupdate(){
      if(!this.isMove){
        this.curTime = this.formatTime(document.getElementById('video').currentTime)
        this.curLength = (document.getElementById('video').currentTime/document.getElementById('video').duration)*100
      }
    },
    //鼠标移动→视频信息出现
    mousemove(){
      var ele = document.getElementsByClassName('top-bar')[0]
      var ele2 = document.getElementsByClassName('play-bar')[0]
      ele.classList.add('top-bar2')
      ele2.classList.add('play-bar2')
      clearTimeout(this.timer)
      this.timer = setTimeout(() =>{
          ele.classList.remove('top-bar2')
          ele2.classList.remove('play-bar2')
      },1000)
    },
    //取消timer
    cancelTimer(){
      clearTimeout(this.timer)
    },
    //全屏
    quanping(){
      var player = document.getElementsByClassName('play-wrapper')[0]
      if(document.fullscreenElement){
        if(document.exitFullscreen){
          document.exitFullscreen();
        }else if(document.webkitCancelFullScreen){
          document.webkitCancelFullScreen();  //Chrome,safari
        }else if(document.mozCancelFullScreen){
          document.mozCancelFullScreen(); //firefox
        }else if(document.msExitFullScreen){
          document.msExitFullScreen();   //ie
        }
      }else{
        if(player.requestFullscreen){
          player.requestFullscreen();
        }else if(player.webkitRequestFullscreen){
          player.webkitMatchesSelector();
        }else if(player.mozRequestFullscreen){
          player.mozRequestFullscreen();
        }else if(player.msRequestFullscreen){
          player.msRequestFullscreen();
        }
      }
    },
    //按下时在视频内
    inVideo(){
      this.isinVideo = true
    },
    //松开时在视频内
    isInVideo(){
      if(this.isinVideo){
        this.$store.commit('setIsPlay',!this.isPlay)
      }
      this.isinVideo = false
    }, 
    //改变视频速度
    speed(sudu){
      document.getElementById('video').playbackRate = sudu
    },
    //静音前的音量
    beforemute(){
      if(this.volume != 0){
        this.volume2 = this.volume
      }
      console.log(this.volume2);
    },
    //点击音量静音
    mute(){
      if(this.volume != 0){
        this.volume = 0
      }else{
        this.volume = this.volume2
      }
    },
    close(){
      this.$store.commit('setPlayFrame',false)
      this.$store.commit('setIsPlay',false)
    },
    // 拖拽开始
    progressMousedown (e) {
      this.curLength = ((e.clientX - this.$refs.progress.getBoundingClientRect().left)/document.getElementById('video').getBoundingClientRect().width)*100
      this.isMove = true
    },
  }
}
</script>

<style scoped>
@import '../assets/css/videoPlay.css';
</style>